import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Text,
    ScrollView,
    Image
} from 'react-native'
import NavBar from 'src/components/navBar'
import {deviceHeight} from "src/util"
import {inject} from "mobx-react/native"
import navigationhelper from "src/components/navigationhelper"
import { Flex } from '@ant-design/react-native'
import AuthFetch from '../../../service/Auth'
import Layer from "src/components/Layer"

@inject('userAuth')
export default class Rate extends Component<{}> {
    constructor (props) {
        super(props)
        this.state = {
           data:[],
           isRefresh:false,
        }
    }

    componentDidMount(){
        let _this = this;
        AuthFetch.paymentConfig({
            token: this.props.userAuth.token
        }).then((res) => {
            _this.setState({
                data:res.data
            })
        }).catch(function (error) {
            Layer.showMsg(error.message)
        })
    }


    cellView =(title,content)=>{
        return(
         <View style={styles.cellView}>
         <Text>{title}</Text>
         <Text style={{color:'#8E8E93',fontSize:15}}>{content}</Text>
         </View>

        )
    }

    cellViewRightView =(title,content)=>{
        return(
         <Flex style={styles.cellViewRight} onPress={()=>{
           
         }}>
            <Text>{title}</Text>
            <View style={{flexDirection:'row',alignItems:'center'}}>
                <Text style={{color:'#8E8E93',fontSize:15}}>{content}</Text>
                <Image source={require('src/assets/mine/arrowRightGrey.png')} style={{width:25,height:25}}></Image>
            </View>
         </Flex>
        )
    }
    render() {
        return (
            <View style={{flex:1}}>
                    <NavBar 
                    back={()=>{navigationhelper.goBack() }}
                    title="费率"
                />
                <ScrollView>
                    <View style={{backgroundColor:'transparent',height:10}}/> 
                    {
                        this.state.data.map((item) => {
                            return <View key={item.id} style={styles.cellView}>
                                <Text>{item.channel_type}费率</Text>
                                <Text style={{color:'#8E8E93',fontSize:15}}>{item.consume_rate}</Text>
                            </View>
                        })
                    }
                    <View style={{backgroundColor:'transparent',height:10}}/>
                </ScrollView>
            </View>   
        )}
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: deviceHeight,
        backgroundColor: '#F5F5F5'
    },
    cellView:{
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'space-between',
        paddingHorizontal: 20,
        alignItems: 'center',
        height:60,
        borderBottomColor:'#E6E3E6',
        borderBottomWidth:1,
    },
    cellViewRight:{
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'space-between',
        paddingLeft:20,
        paddingRight:15,
        alignItems: 'center',
        height:60,
        borderBottomColor:'#E6E3E6',
        borderBottomWidth:1,
    },
    logoutView:{
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'center',
        paddingHorizontal: 20,
        alignItems: 'center',
        height:60,
        borderBottomColor:'#E6E3E6',
        borderBottomWidth:1,
    }
    
})